<template>
  <div>

    <div class="pie">
      <div id="pie1">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main1" style="float:left;width:100%;height: 300px"></div>
      </div>
      <div id="pie2">
        <div id="main2" style="float:left;width:100%;height: 300px"></div>
      </div>
    </div>
  </div>

</template>

<script>


let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data () {
    return {
      pieData :[{

      }],
      pieData2 :[{
        name: '兰园',
        value: 335,
      },
        {
          name: '竹园',
          value: 310,
        },
        {
          name: '梅园',
          value: 234,
        }],
    }
  },

  created(){
    this.$axios.post("http://localhost:8080/api/v1/room/alllist", {
    }).then(r => {
      for(let i=0;i<r.data.data.length;i++){
        let roless={value:r.data.data[i].id,name:r.data.data[i].description};
        this.pieData.push(roless);
        this.initData();
      }
    })
    this.$axios.post("http://localhost:8080/api/v1/room/getCount", {
    }).then(r => {
      for(let i=0;i<r.data.data.length;i++){
        let roless={value:r.data.data[i].id,name:r.data.data[i].description};
        this.pieData2.push(roless);
        this.initData();
      }
    })

  },
  mounted(){
    this.initData();
  },

  methods:{
    //初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'));
      var myChart2 = echarts.init(document.getElementById('main2'));
      // 绘制图表
      myChart.setOption({
        title : {
          text: '房屋信息',//主标题
          subtext: '',//副标题
          x:'center',//x轴方向对齐方式
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series : [
          {

            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data: this.pieData,
            // {value:335, name:'直接访问'},
            // {value:310, name:'邮件营销'},
            // {value:234, name:'联盟广告'},
            // {value:135, name:'视频广告'},
            // {value:1548, name:'搜索引擎'}
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      myChart2.setOption({
        title : {
          text: '楼栋数量',//主标题
          subtext: '竹园，兰园，梅园',//副标题
          x:'center',//x轴方向对齐方式
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series : [
          {

            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data: this.pieData2,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
  }
}
</script>
<style scoped>
</style>